<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>多彩主题背景切换</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#6366F1',
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .transition-bg {
        transition: background 1s ease-in-out;
      }
      .glass-effect {
        backdrop-filter: blur(10px);
        background-color: rgba(255, 255, 255, 0.1);
      }
    }
  </style>
  
  <style>
    /* 主题渐变背景定义 */
    .theme-default {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    }
    
    .theme-sunset {
      background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
    }
    
    .theme-ocean {
      background: linear-gradient(135deg, #1dd1a1 0%, #10ac84 100%);
    }
    
    .theme-night {
      background: linear-gradient(135deg, #2c3e50 0%, #000000 100%);
    }
    
    .theme-purple {
      background: linear-gradient(135deg, #9b59b6 0%, #3498db 100%);
    }
    
    .theme-forest {
      background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    }
    
    .theme-candy {
      background: linear-gradient(135deg, #ff9ff3 0%, #feca57 100%);
    }
    
    /* 动画效果 */
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    
    .animate-pulse-slow {
      animation: pulse 3s infinite;
    }
    
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    
    /* 滑块控件样式 */
    input[type="range"] {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.3);
      outline: none;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    input[type="range"]::-webkit-slider-thumb:hover {
      transform: scale(1.2);
    }
    
    /* 自定义滚动条 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  </style>
</head>
<body class="theme-default min-h-screen transition-bg duration-1000 font-sans text-gray-800 flex flex-col">
  <!-- 页面头部 -->
  <header class="w-full py-6 px-4 sm:px-6 lg:px-8 transition-all duration-500">
    <div class="container mx-auto flex justify-between items-center">
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow flex items-center">
        <i class="fa fa-paint-brush mr-3 animate-pulse-slow"></i>
        <span>多彩主题切换</span>
      </h1>
      <button id="info-btn" class="glass-effect p-2 rounded-full hover:bg-white/20 transition-all duration-300">
        <i class="fa fa-info text-xl"></i>
      </button>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col lg:flex-row gap-8 items-center lg:items-start">
    <!-- 控制面板 -->
    <div class="w-full lg:w-1/3 glass-effect rounded-2xl shadow-xl p-6 sm:p-8 transition-all duration-500 hover:shadow-2xl">
      <h2 class="text-xl sm:text-2xl font-bold mb-6 pb-3 border-b border-white/20 flex items-center">
        <i class="fa fa-sliders mr-2"></i>主题控制
      </h2>
      
      <!-- 预设主题 -->
      <div class="mb-8">
        <h3 class="text-lg font-medium mb-4">预设主题</h3>
        <div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
          <button class="theme-btn w-full aspect-square rounded-lg theme-default border-2 border-white transition-all duration-300 hover:scale-110 active" data-theme="default"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-sunset border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="sunset"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-ocean border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="ocean"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-night border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="night"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-purple border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="purple"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-forest border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="forest"></button>
          <button class="theme-btn w-full aspect-square rounded-lg theme-candy border-2 border-transparent transition-all duration-300 hover:scale-110" data-theme="candy"></button>
          <button id="random-theme" class="w-full aspect-square rounded-lg bg-gray-200 border-2 border-transparent transition-all duration-300 hover:scale-110 flex items-center justify-center" title="随机主题">
            <i class="fa fa-random text-gray-700"></i>
          </button>
        </div>
      </div>
      
      <!-- 自定义主题 -->
      <div class="mb-8">
        <h3 class="text-lg font-medium mb-4">自定义主题</h3>
        <div class="space-y-6">
          <!-- 主色调选择 -->
          <div>
            <label class="block text-sm font-medium mb-2">主色调</label>
            <div class="flex items-center gap-3">
              <input type="color" id="primary-color" value="#6366F1" class="w-10 h-10 cursor-pointer rounded-full overflow-hidden border-2 border-white">
              <input type="text" id="primary-color-hex" value="#6366F1" class="flex-grow px-3 py-2 rounded-lg bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50">
            </div>
          </div>
          
          <!-- 辅助色调选择 -->
          <div>
            <label class="block text-sm font-medium mb-2">辅助色调</label>
            <div class="flex items-center gap-3">
              <input type="color" id="secondary-color" value="#8B5CF6" class="w-10 h-10 cursor-pointer rounded-full overflow-hidden border-2 border-white">
              <input type="text" id="secondary-color-hex" value="#8B5CF6" class="flex-grow px-3 py-2 rounded-lg bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50">
            </div>
          </div>
          
          <!-- 角度控制 -->
          <div>
            <label class="block text-sm font-medium mb-2">
              渐变角度: <span id="angle-value">135</span>°
            </label>
            <input type="range" id="angle" min="0" max="360" value="135" class="w-full">
          </div>
          
          <!-- 应用按钮 -->
          <button id="apply-custom" class="w-full py-3 px-4 bg-white/20 hover:bg-white/30 rounded-lg transition-all duration-300 font-medium flex items-center justify-center gap-2">
            <i class="fa fa-check"></i>
            <span>应用自定义主题</span>
          </button>
        </div>
      </div>
      
      <!-- 其他选项 -->
      <div>
        <h3 class="text-lg font-medium mb-4">背景选项</h3>
        <div class="space-y-4">
          <!-- 颗粒效果 -->
          <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" id="grain-effect" class="w-5 h-5 rounded bg-white/20 border-white/30 text-primary focus:ring-primary">
              <span>颗粒纹理效果</span>
            </label>
          </div>
          
          <!-- 动画效果 -->
          <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" id="animate-bg" checked class="w-5 h-5 rounded bg-white/20 border-white/30 text-primary focus:ring-primary">
              <span>背景动画效果</span>
            </label>
          </div>
          
          <!-- 重置按钮 -->
          <button id="reset-theme" class="w-full py-3 px-4 bg-white/10 hover:bg-white/20 rounded-lg transition-all duration-300 font-medium flex items-center justify-center gap-2">
            <i class="fa fa-refresh"></i>
            <span>重置为默认主题</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 预览区域 -->
    <div class="w-full lg:w-2/3 flex flex-col items-center justify-center">
      <div class="glass-effect rounded-2xl shadow-xl p-6 sm:p-8 w-full max-w-2xl transition-all duration-500 hover:shadow-2xl animate-float">
        <h2 class="text-xl sm:text-2xl font-bold mb-6 pb-3 border-b border-white/20">主题预览</h2>
        
        <div class="space-y-6">
          <div class="p-5 bg-white/10 rounded-xl">
            <h3 class="text-lg font-medium mb-2">标题示例</h3>
            <p class="text-sm opacity-80">这是一段示例文本，用于展示在当前主题下的文字显示效果。</p>
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div class="p-4 bg-white/10 rounded-xl text-center">
              <i class="fa fa-lightbulb-o text-3xl mb-2"></i>
              <p class="text-sm">创意灵感</p>
            </div>
            <div class="p-4 bg-white/10 rounded-xl text-center">
              <i class="fa fa-paint-brush text-3xl mb-2"></i>
              <p class="text-sm">色彩搭配</p>
            </div>
          </div>
          
          <div class="p-4 bg-white/10 rounded-xl">
            <h3 class="text-lg font-medium mb-3">交互元素示例</h3>
            <div class="flex flex-wrap gap-3">
              <button class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg transition-all duration-300 text-sm">
                按钮 1
              </button>
              <button class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg transition-all duration-300 text-sm">
                按钮 2
              </button>
              <input type="text" placeholder="输入框示例" class="px-3 py-2 bg-white/20 border border-white/30 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-white/50">
            </div>
          </div>
        </div>
      </div>
      
      <!-- 主题信息 -->
      <div class="mt-8 glass-effect rounded-xl p-5 text-center max-w-md">
        <h3 class="font-medium mb-2">当前主题</h3>
        <p id="current-theme-name" class="text-lg font-bold">默认主题</p>
        <p id="current-theme-colors" class="text-sm mt-1 opacity-80">
          主色: #f5f7fa, 辅助色: #c3cfe2
        </p>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="w-full py-6 px-4 text-center transition-all duration-500">
    <p class="text-sm">多彩主题背景切换 &copy; 2023</p>
  </footer>
  
  <!-- 信息模态框 -->
  <div id="info-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
    <div class="glass-effect rounded-2xl p-6 max-w-md w-full mx-4 transform scale-95 transition-transform duration-300">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-xl font-bold">关于主题切换</h3>
        <button id="close-info" class="p-1 hover:bg-white/20 rounded-full transition-colors">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="space-y-3 text-sm">
        <p>这个应用允许你切换不同的背景主题，包括预设主题和自定义主题。</p>
        <p>你可以：</p>
        <ul class="list-disc pl-5 space-y-1">
          <li>选择预设的主题样式</li>
          <li>创建自定义的渐变背景</li>
          <li>调整渐变角度和颜色</li>
          <li>添加颗粒纹理效果</li>
          <li>启用或禁用背景动画</li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    // DOM元素
    const body = document.body;
    const themeBtns = document.querySelectorAll('.theme-btn');
    const randomThemeBtn = document.getElementById('random-theme');
    const primaryColorInput = document.getElementById('primary-color');
    const primaryColorHexInput = document.getElementById('primary-color-hex');
    const secondaryColorInput = document.getElementById('secondary-color');
    const secondaryColorHexInput = document.getElementById('secondary-color-hex');
    const angleInput = document.getElementById('angle');
    const angleValue = document.getElementById('angle-value');
    const applyCustomBtn = document.getElementById('apply-custom');
    const resetThemeBtn = document.getElementById('reset-theme');
    const grainEffectCheckbox = document.getElementById('grain-effect');
    const animateBgCheckbox = document.getElementById('animate-bg');
    const currentThemeName = document.getElementById('current-theme-name');
    const currentThemeColors = document.getElementById('current-theme-colors');
    const infoBtn = document.getElementById('info-btn');
    const infoModal = document.getElementById('info-modal');
    const closeInfoBtn = document.getElementById('close-info');
    
    // 主题配置
    const themes = {
      default: {
        name: '默认主题',
        colors: ['#f5f7fa', '#c3cfe2'],
        angle: 135
      },
      sunset: {
        name: '日落主题',
        colors: ['#ff6b6b', '#feca57'],
        angle: 135
      },
      ocean: {
        name: '海洋主题',
        colors: ['#1dd1a1', '#10ac84'],
        angle: 135
      },
      night: {
        name: '黑夜主题',
        colors: ['#2c3e50', '#000000'],
        angle: 135
      },
      purple: {
        name: '紫色主题',
        colors: ['#9b59b6', '#3498db'],
        angle: 135
      },
      forest: {
        name: '森林主题',
        colors: ['#2ecc71', '#27ae60'],
        angle: 135
      },
      candy: {
        name: '糖果主题',
        colors: ['#ff9ff3', '#feca57'],
        angle: 135
      }
    };
    
    // 当前主题
    let currentTheme = 'default';
    let isCustomTheme = false;
    let animationInterval;
    
    // 初始化
    function init() {
      // 设置角度显示值
      angleValue.textContent = angleInput.value;
      
      // 启动背景动画
      startBackgroundAnimation();
      
      // 更新主题信息显示
      updateThemeInfo();
    }
    
    // 切换主题
    function switchTheme(themeName) {
      // 移除所有主题类
      Object.keys(themes).forEach(theme => {
        body.classList.remove(`theme-${theme}`);
      });
      
      // 移除自定义主题
      body.style.background = '';
      
      // 添加新主题类
      body.classList.add(`theme-${themeName}`);
      
      // 更新当前主题
      currentTheme = themeName;
      isCustomTheme = false;
      
      // 更新主题按钮状态
      updateThemeButtons();
      
      // 更新主题信息显示
      updateThemeInfo();
      
      // 更新滑块颜色
      updateSliderColor();
    }
    
    // 应用自定义主题
    function applyCustomTheme() {
      // 移除所有主题类
      Object.keys(themes).forEach(theme => {
        body.classList.remove(`theme-${theme}`);
      });
      
      // 获取颜色和角度值
      const primaryColor = primaryColorInput.value;
      const secondaryColor = secondaryColorInput.value;
      const angle = angleInput.value;
      
      // 设置自定义背景
      body.style.background = `linear-gradient(${angle}deg, ${primaryColor}, ${secondaryColor})`;
      
      // 更新状态
      isCustomTheme = true;
      currentTheme = 'custom';
      
      // 更新主题按钮状态
      updateThemeButtons();
      
      // 更新主题信息显示
      currentThemeName.textContent = '自定义主题';
      currentThemeColors.textContent = `主色: ${primaryColor}, 辅助色: ${secondaryColor}`;
      
      // 更新滑块颜色
      updateSliderColor();
    }
    
    // 更新主题按钮状态
    function updateThemeButtons() {
      themeBtns.forEach(btn => {
        if (btn.getAttribute('data-theme') === currentTheme && !isCustomTheme) {
          btn.classList.add('border-white', 'active');
          btn.classList.remove('border-transparent');
        } else {
          btn.classList.remove('border-white', 'active');
          btn.classList.add('border-transparent');
        }
      });
    }
    
    // 更新主题信息显示
    function updateThemeInfo() {
      if (!isCustomTheme && themes[currentTheme]) {
        currentThemeName.textContent = themes[currentTheme].name;
        currentThemeColors.textContent = `主色: ${themes[currentTheme].colors[0]}, 辅助色: ${themes[currentTheme].colors[1]}`;
      }
    }
    
    // 生成随机主题
    function generateRandomTheme() {
      // 生成随机颜色
      const color1 = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
      const color2 = '#' + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0');
      const angle = Math.floor(Math.random() * 360);
      
      // 移除所有主题类
      Object.keys(themes).forEach(theme => {
        body.classList.remove(`theme-${theme}`);
      });
      
      // 设置随机背景
      body.style.background = `linear-gradient(${angle}deg, ${color1}, ${color2})`;
      
      // 更新输入框
      primaryColorInput.value = color1;
      primaryColorHexInput.value = color1;
      secondaryColorInput.value = color2;
      secondaryColorHexInput.value = color2;
      angleInput.value = angle;
      angleValue.textContent = angle;
      
      // 更新状态
      isCustomTheme = true;
      currentTheme = 'custom';
      
      // 更新主题按钮状态
      updateThemeButtons();
      
      // 更新主题信息显示
      currentThemeName.textContent = '随机主题';
      currentThemeColors.textContent = `主色: ${color1}, 辅助色: ${color2}`;
      
      // 更新滑块颜色
      updateSliderColor();
    }
    
    // 重置为默认主题
    function resetToDefaultTheme() {
      switchTheme('default');
      
      // 重置输入框
      primaryColorInput.value = '#6366F1';
      primaryColorHexInput.value = '#6366F1';
      secondaryColorInput.value = '#8B5CF6';
      secondaryColorHexInput.value = '#8B5CF6';
      angleInput.value = 135;
      angleValue.textContent = 135;
      
      // 重置选项
      grainEffectCheckbox.checked = false;
      animateBgCheckbox.checked = true;
      
      // 移除颗粒效果
      removeGrainEffect();
      
      // 启动背景动画
      startBackgroundAnimation();
    }
    
    // 添加颗粒效果
    function addGrainEffect() {
      // 检查是否已存在颗粒容器
      let grainContainer = document.getElementById('grain-container');
      
      if (!grainContainer) {
        grainContainer = document.createElement('div');
        grainContainer.id = 'grain-container';
        grainContainer.style.position = 'fixed';
        grainContainer.style.top = '0';
        grainContainer.style.left = '0';
        grainContainer.style.width = '100%';
        grainContainer.style.height = '100%';
        grainContainer.style.pointerEvents = 'none';
        grainContainer.style.zIndex = '1';
        grainContainer.style.opacity = '0.05';
        body.appendChild(grainContainer);
      }
      
      // 创建颗粒纹理
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      const imgData = ctx.createImageData(canvas.width, canvas.height);
      const pixels = imgData.data;
      
      for (let i = 0; i < pixels.length; i += 4) {
        const gray = Math.random() * 255;
        pixels[i] = gray;
        pixels[i + 1] = gray;
        pixels[i + 2] = gray;
        pixels[i + 3] = 255;
      }
      
      ctx.putImageData(imgData, 0, 0);
      grainContainer.innerHTML = '';
      grainContainer.appendChild(canvas);
    }
    
    // 移除颗粒效果
    function removeGrainEffect() {
      const grainContainer = document.getElementById('grain-container');
      if (grainContainer && grainContainer.parentNode) {
        grainContainer.parentNode.removeChild(grainContainer);
      }
    }
    
    // 开始背景动画
    function startBackgroundAnimation() {
      // 清除现有动画
      if (animationInterval) {
        clearInterval(animationInterval);
      }
      
      if (!animateBgCheckbox.checked) return;
      
      let hueRotate = 0;
      
      animationInterval = setInterval(() => {
        hueRotate = (hueRotate + 0.5) % 360;
        body.style.filter = `hue-rotate(${hueRotate}deg)`;
      }, 100);
    }
    
    // 停止背景动画
    function stopBackgroundAnimation() {
      if (animationInterval) {
        clearInterval(animationInterval);
        animationInterval = null;
        body.style.filter = 'hue-rotate(0deg)';
      }
    }
    
    // 更新滑块颜色
    function updateSliderColor() {
      const primaryColor = isCustomTheme ? primaryColorInput.value : themes[currentTheme].colors[0];
      document.documentElement.style.setProperty('--primary-color', primaryColor);
      document.querySelector('input[type="range"]::-webkit-slider-thumb').style.backgroundColor = primaryColor;
    }
    
    // 事件监听器
    themeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const theme = btn.getAttribute('data-theme');
        switchTheme(theme);
      });
    });
    
    randomThemeBtn.addEventListener('click', generateRandomTheme);
    
    primaryColorInput.addEventListener('input', () => {
      primaryColorHexInput.value = primaryColorInput.value;
    });
    
    primaryColorHexInput.addEventListener('input', () => {
      if (/^#[0-9A-F]{6}$/i.test(primaryColorHexInput.value)) {
        primaryColorInput.value = primaryColorHexInput.value;
      }
    });
    
    secondaryColorInput.addEventListener('input', () => {
      secondaryColorHexInput.value = secondaryColorInput.value;
    });
    
    secondaryColorHexInput.addEventListener('input', () => {
      if (/^#[0-9A-F]{6}$/i.test(secondaryColorHexInput.value)) {
        secondaryColorInput.value = secondaryColorHexInput.value;
      }
    });
    
    angleInput.addEventListener('input', () => {
      angleValue.textContent = angleInput.value;
    });
    
    applyCustomBtn.addEventListener('click', applyCustomTheme);
    
    resetThemeBtn.addEventListener('click', resetToDefaultTheme);
    
    grainEffectCheckbox.addEventListener('change', (e) => {
      if (e.target.checked) {
        addGrainEffect();
      } else {
        removeGrainEffect();
      }
    });
    
    animateBgCheckbox.addEventListener('change', (e) => {
      if (e.target.checked) {
        startBackgroundAnimation();
      } else {
        stopBackgroundAnimation();
      }
    });
    
    // 信息模态框
    infoBtn.addEventListener('click', () => {
      infoModal.classList.remove('opacity-0', 'pointer-events-none');
      infoModal.querySelector('div').classList.remove('scale-95');
      infoModal.querySelector('div').classList.add('scale-100');
    });
    
    closeInfoBtn.addEventListener('click', () => {
      infoModal.classList.add('opacity-0', 'pointer-events-none');
      infoModal.querySelector('div').classList.remove('scale-100');
      infoModal.querySelector('div').classList.add('scale-95');
    });
    
    // 点击模态框外部关闭
    infoModal.addEventListener('click', (e) => {
      if (e.target === infoModal) {
        closeInfoBtn.click();
      }
    });
    
    // 窗口大小改变时重新生成颗粒效果
    window.addEventListener('resize', () => {
      if (grainEffectCheckbox.checked) {
        addGrainEffect();
      }
    });
    
    // 初始化页面
    window.addEventListener('load', init);
  </script>
</body>
</html>
    